<template>
    <div class="com-cnt">
        <div style="overflow:hidden">
            <input class="search" type="text" v-model="keyWord" placeholder="请输入搜索的内容" @keyup.enter="search"><router-link to="njx" tag="span">取消</router-link>
        </div>
        <ul class="searchList">
            <li @click="direct(item.id)" v-for="item in searchList">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain,domain2 } from '@/assets/js/config'
//import { fastclick } from "@/assets/js/fastclick.js";
import {Loadmore} from 'mint-ui'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
export default {
    name: 'searchPage',
    data() {
        return {
            keyWord: '',
            searchList: []
        }
    },
    created(){
        
    },
    mounted() {
        
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: "/njxdetails" ,
            query: {
                    id: val,
                }
            })
        },
        search: function(){
            let that = this
            axios({
                url: domain2 + '/shop/api/product/search',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'keyword':that.keyWord})
            }).then(res => { that.searchSucc(res) }).catch(err => { console.log(err) })
        },
        searchSucc: function(res){
            console.log(res.data)
            this.searchList = res.data.data.page.content
        }
    },
}
</script>
<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    font-size 12px
    .search
        width 300px
        height 30px
        line-height 30px
        float left
        border-radius 13px
        border 1px solid #ccc
        margin-left 15px
        text-indent 40px
        background url('../../assets/imgs/njx/search.png') no-repeat
        background-position 17px 7px
        background-size 22px 14px
        margin-top 12px
    span
        width 30px
        height 30px
        line-height 30px
        margin-top 12px
        margin-right 16px
        float right
    .searchList
        width 100%
        padding 16px
        li 
            height 30px
            line-height 30px
            color #666
            border 1px solid #ccc
            margin-top 10px
</style>